<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jquery实现特效</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <style>
        .div-dd div {
            margin-top: 100px;
        }
    </style>
</head>
<body>

<select id="select1">
    <option value="0">全部</option>
    <option value="1">10以内的偶数</option>
    <option value="2">10以内的奇数</option>
    <option value="3">隐藏右侧的显示</option>
</select>
<select id="select2">
</select>

<div style="width: 600px; margin-top: 100px;margin-left: 100px;">
    <div class="div-dd">
        <div>
            <div id="p-fadeInAndOut">娱乐卡等缴费的时间里疯狂的解放军1</div>
            <button onclick="pFadeIn1()">淡入淡出1(fadeIn)</button>
            <button onclick="pFadeOut1()">淡入淡出1(fadeOut)</button>
        </div>
        <div>
            <button onclick="pFadeIn2()">淡入淡出2(fadeIn)</button>
            <button onclick="pFadeOut2()">淡入淡出2(fadeOut)</button>
        </div>
        <div>
            <button onclick="fadeToggleTest()">淡入淡出(fadeToggle)</button>
            <div id="p-fadeToggle">娱乐卡等缴费的时间里疯狂的解放军2</div>
        </div>
        <div>
            <button onclick="fadeToDemo()">淡入淡出(fadeTo)</button>
            <div id="p-fadeTo">娱乐卡等缴费的时间里疯狂的解放军4</div>
        </div>
    </div>
</div>


</body>
<script>

    let select1 = $('#select1');
    let select2 = $('#select2');
    let pFadeInAndOut = $('#p-fadeInAndOut');
    let pFadeToggle = $('#p-fadeToggle');
    let pFadeTo = $('#p-fadeTo');
    let intArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    $(() => {
        select2Val();
        fadeInAndFadeOut();
    });

    /**
     * 功能:
     *      使用fadeIn函数显示元素.
     * 说明:
     *      1. 函数说明:
     *          - 格式: $(selector).fadeIn(speed,callback);
     *          - 参数:
     *              1. speed: 取值为:
     *                  - 'fast': 快速的显示;
     *                  - 'slow': 慢慢的显示;
     *                  - 毫秒数值: 计时显示.
     *              2. callback: 回调函数, 在元素完全显示之后执行.
     */
    function pFadeIn1() {
        //fast
        pFadeInAndOut.fadeIn("slow", function () {
            console.log('元素显示了')
        });
    }

    function pFadeIn2() {
        pFadeInAndOut.fadeIn(3000);
    }
    /**
     * 功能:
     *      使用fadeIn函数隐藏元素.
     * 说明:
     *      1. 函数说明:
     *          - 格式: $(selector).fadeOut(speed,callback);
     *          - 参数:
     *              1. speed: 取值为:
     *                  - 'fast': 快速的显示;
     *                  - 'slow': 慢慢的显示;
     *                  - 毫秒数值: 计时显示.
     *              2. callback: 回调函数, 在元素完全显示之后执行.
     *
     */
    function pFadeOut1() {
        pFadeInAndOut.fadeOut("slow", function () {
            console.log('元素隐藏了')
        });
    }

    function pFadeOut2() {
        pFadeInAndOut.fadeOut(3000);
    }

    /**
     * 功能:
     *      fadeToggle函数可以循环切换元素的显示/隐藏.
     * 说明:
     *      1. 参数和fadeIn相同.
     */
    function fadeToggleTest() {
        pFadeToggle.fadeToggle("fast", function () {
            console.log("fadeToggle函数执行完毕.")
        });
    }

    /**
     * 功能:
     *      fadeTo方法可以设置元素的透明.
     * 说明:
     *      1. 函数格式为: `$(selector).fadeTo(speed,opacity,callback)`
     *      2. 参数说明:
     *          - opacity: 就是指定的透明度, 0~1, 0为全透明, 1为一点都不透明..
     *
     */
    function fadeToDemo() {
        pFadeTo.fadeTo("slow", 0, function () {
            console.log("fadeTo执行完毕")
        });
    }

    function fadeInAndFadeOut() {
        //jquery给select标签绑定内容改变事件
        select1.change(function () {
            let select1Val = select1.val();
            //清空对应的select标签的内容, 然后再添加
            select2.find("option").remove();
            //注意获取到的select的值为string类型.
            if (select1Val === '0') {
                select2ShowOrHide(true);
                $.each(intArr, function (index, value) {
                    select2.append(`<option value="${value}">${value}</option>`);
                });
            } else if (select1Val === '1') {
                select2ShowOrHide(true);
                $.each(intArr, function (index, value) {
                    if (value % 2 === 0) {
                        select2.append(`<option value="${value}">${value}</option>`);
                    }
                });
            } else if (select1Val === '2') {
                select2ShowOrHide(true);
                $.each(intArr, function (index, value) {
                    if (value % 2 === 1) {
                        select2.append(`<option value="${value}">${value}</option>`);
                    }
                });
            } else if (select1Val === '3') {
                select2ShowOrHide(false);
            } else if (select1Val === '4') {

            }
        });
    }

    function select2Val() {
        $.each(intArr, function (index, value) {
            select2.append(`<option value="${value}">${value}</option>`);
        });
    }

    function select2ShowOrHide(flag) {
        if (flag) {
            select2.show();
        } else {
            select2.hide();
        }
    }

</script>
</html>